<template>
  <div class="home">
		<div class="content">
			<h3 class="title">{{datas.activityTitle}}</h3>
			<p class="time"><van-icon name="clock-o" color="#ffc004" /> {{datas.activityStartTime}}</p>
			<p class="adress"><van-icon name="location-o" color="blue" /> {{datas.addressDetailed}}</p>
			<div class="desc" v-html="datas.activityDesc"></div>

		</div>
		<van-button type="info"  size="large" class="button" @click="show = true">我要报名</van-button>
		
		<van-overlay :show="show" @click="writeMessageFun($event)">
			<div class="wrapper"  >
				<div class="block" ref="msk">
					<van-cell-group class="cell" >
						<van-field
							v-model="username"
							required
							label-width="60px"
							label="姓名:"
							placeholder="请输入姓名(必填)"
						/>
						<van-field
							v-model="phone"
							required
							label="手机号:"
							label-width="60px"
							placeholder="请输入手机号(必填)"
						/>
						<van-field
							v-model="wechat"
							label="微信号:"
							label-width="60px"
							placeholder="请输入微信号"
						/>
						<van-field
							v-model="qqnum"
							label="QQ号:"
							label-width="60px"
							placeholder="请输入QQ号"
						/>
						<van-field
							v-model="email"
							label="Email:"
							label-width="60px"
							placeholder="请输入Email"
						/>
						<van-button type="info"  class="comit" @click.stop="comit">提交报名</van-button>
					</van-cell-group>
				</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
	import md5 from 'js-md5';
	let Base64 = require('js-base64').Base64;
export default {
  name: 'home',
  data () {
    return {
			id:'',
      show:false,
			username:'',
			phone:'',
			wechat:'',
			qqnum:'',
			email:'',
			datas:{}
			
    }
  },
	created () {//先执行
	var id = this.$route.query.id //获取活动id
	this.id = id
	let parameter = Base64.encode(JSON.stringify({activityID:id}));
	let sign = md5(parameter + this.$key)
		this.$ajax.get('getActivityDetail.ashx?parameter='+parameter+'&sign='+sign)
		.then((res)=>{
			if(res.data.code == 200){
				this.datas = res.data.data
				
			}
		})
		.catch((error)=>{
			console.log(error)
		})
	},
	methods:{ //事件处理
		comit(){
			if(this.username == '' || this.phone == '' ){
				this.$toast('手机号和用户名必填');
			}else{
				let regDetails = []
				if(this.wechat){
					regDetails.push({name:'WXchat',value:this.wechat})
				}
				if(this.qqnum){
					regDetails.push({name:'QQNum',value:this.qqnum})
				}
				if(this.email){
					regDetails.push({name:'Email',value:this.email})
				}
				if(this.wechat == '' && this.qqnum == '' && this.email == ''){
					regDetails = ''
				}
				
				let parameter = Base64.encode(JSON.stringify({activityID:this.id,userTel:this.phone,userName:this.username,regDetails:regDetails}));
				let sign = md5(parameter + this.$key)
				this.$ajax.get('saveUserActivity.ashx?parameter='+parameter+'&sign='+sign)
				
				.then((res)=>{
					
					if(res.data.code == 200){
						this.show = false
						this.$router.push({path:'/success',query:{id:this.id}})
						
					}else{
						
						this.$toast(res.data.msg);
					}
				})
				.catch((error)=>{
					console.log(error)
				})
			}
		},
		writeMessageFun(ev){
			if (!this.$refs.msk.contains(ev.target)) {
　　　　　　this.show = false
　　　　}
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{padding:20px 15px;}
.title{margin: 0 0 10px;font-size: 18px;color: #333;}
.time{font-size: 14px;margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #ccc;text-indent: 0;text-align: center;}
.adress{font-size: 14px;margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #ccc;text-indent: 0;text-align: center;}
.details ,p{text-align: left;text-indent: 2em;color: #666;line-height: 23px;}
.desc{margin-bottom: 10px;padding-bottom: 20px;}
.desc img{width: 200px;height: 120px;}
.acpic{width: 200px;height: 120px;}
.button{position: fixed;bottom: 0;left: 0;}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: auto;
  background-color: #fff;
}
.van-field__label{
	text-align: left;
}
.cell{padding: 30px 10px;}
.comit{width: 60%;margin-top: 40px;}
</style>
